//全局设置axios拦截器
axios.interceptors.request.use(
    (config) => {
        config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token')
        return config;
    }, (error) => {
        return Promise.reject(error)
    }
)



//获取搜索按钮
var searchBtn = document.querySelector('.searchbox .search');
//获取输入框
var inputEle = document.querySelector('.searchbox input');

//获取localStorage中存储的用户信息
var userinfo = JSON.parse(localStorage.getItem('userinfo'));
//渲染用户信息到首页
document.querySelector('.username').innerHTML = userinfo.name;

//点击搜索按钮, 发起ajax请求, 传参数给服务器端, 服务器端返回搜索的结果
searchBtn.onclick = () => {
    axios.get('/user/search', { params: { searchkey: inputEle.value } }).then((res) => {
        render(res.data.list)
        console.log(res.data);
    })
}

//给table-body绑定点击事件(事件委托)
var tablebody = document.querySelector('.table-body');
tablebody.onclick = (e) => {
    //e.target.tagName == 'SPAN' 判断是不是 span 标签
    //e.target.classList.contains('icon-shanchu') 判断是不是 包含 icon-shanchu 这个类名
    if (e.target.tagName == 'SPAN' && e.target.classList.contains('icon-shanchu')) {
        //先获取这个删除按钮对应用户的手机号
        //console.log(e.target.dataset.phone);
        //发起 删除请求 , 删除服务器端的这个用户
        axios.post('/user/delete', { phone: e.target.dataset.phone }).then((res) => {
            console.log(res.data);
            //如果想要在发请求给服务器,删除成功之后, 同时让页面也看到删除后的效果,有两种方案
            //方案一: 本地删除这个dom节点
            //e.target.parentNode.parentNode.remove();
            //方案二: 让删除接口 返回删除后的新数据, 本地调用render方法重新渲染.
            render(res.data.list)
        })
    }
}

//渲染列表
function render(data) {
    var str = ''

    str = data.map((item, index) => {
        return `<ul class="row">
                    <li>${item.email}</li> 
                    <li>${item.name}</li>
                    <li>${item.phone}</li>
                    <li>${item.ingroup}</li>
                    <li>${item.isadmin ? '是' : '否'}</li>
                    <li class="${item.status ? '' : 'error'}">${item.status ? '正常' : '异常'}</li>
                    <li>
                        <span class="iconfont icon-bianji editicon" id="101"></span>
                        <span class="iconfont icon-shanchu deleteicon" data-phone="${item.phone}"></span>
                    </li>
                </ul>`
    }).join('')

    if (str == '') {
        str = '<ul style="text-align:center;color:red">未查询到数据!</ul>'
    }
    document.querySelector('.table .table-body').innerHTML
        = str;
}

//axios是从axios.min.js文件中暴露的 用来发送ajax请求的一个对象
axios.get('/user/list', { params: { page: 1, count: 2 },headers:{} }).then((res) => {
    //调用render方法, 传入后端返回的数据 渲染列表
    render(res.data.list);
    console.log(res.data);
})


// axios.put()
// axios.delete()